const {src,dest}=require('gulp');
const sass=require('gulp-sass');
const babel=require('gulp-babel'); 
const inject = require('gulp-inject'); 
const browserSync = require('browser-sync').create(); 

//sass转css
const scss = () =>src('src/index.scss')
    .pipe(sass())
    .pipe(dest('./dist/css/'))
    .pipe(browserSync.reload({
        stream: true 
    })
);
exports.scss = scss;

//ES6 7 转ES5
const js = () =>src(['src/js/*.js', '!src/js/test1.js'])
    .pipe(babel({ 
        "presets": ['env'] 
    }))
    .pipe(dest('./dist/js/'))
    .pipe(browserSync.reload({
        stream: true 
    })
);
exports.js = js;

//图片移动
const images = () =>
   src('src/images/*.+(png | jpg | jpeg | gif | svg)', 'src/images/*/*.+(png | jpg | jpeg | gif | svg)')
   .pipe(dest('./dist/images/'))
   .pipe(browserSync.reload({
    stream: true 
    })
);
 exports.images = images;

//html动态插入js文件
 const html=()=> src('./index.html') 
    .pipe(inject(src(['./dist/js/*.js'], { read: false, }), {
        ignorePath: ['./dist/'], //去除dist
        addRootSlash: false, //去除/
    }))
    .pipe(dest('./dist/'))
    .pipe(browserSync.reload({
        stream: true 
    })
);
exports.html=html;

//搭建本地服务器环境
// const watchs = () => browserSync.init({
//     server: { 
//         baseDir: './dist/' 
//     }
// })   
//  exports.watchs = watchs

 const {watch } = require('gulp'); 
 const watchs = () => { 
    watch('src/js/*.js', js) 
    watch('src/scss/*.scss', scss) 
    watch('src/index.html', html)
    watch(['src/images/*.*','src/images/*/*.*'],images) 
    browserSync.init({ 
        server: { baseDir: './dist' } 
    }) 
}
 exports.watchs = watchs

//  const { src, dest, watch, series,parallel } = require('gulp'); 
// exports.serve = series(parallel(js, scss, images), html, watchs);